<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">我的收藏</block>
		</cu-custom>
		<view v-if="isInit">
			
			<uniSticky>
				<navLongTab :tabTitle="tabs" @changeTab="changeTab"></navLongTab>
			</uniSticky>
			
			<view v-show="tabNow==0" :style="'height:'+screenHeight+'px;'">
				<view class="bg-white solid-top flex justify-between align-center padding-right" style="width: 100%;height:45px">
					<text class="text-sm padding-left">
						您共有 <text class="text-red" style="margin-left: 3px;margin-right: 3px;">{{sceneryList.length}}</text> 条 景点 收藏
					</text>
					<text class="text-red" v-if="sceneryList.length>0" @tap="sceneryManager">{{!this.isSceneryManager?'管理':'取消'}}</text>
				</view>
				
				<favorite-scenery-item v-for="(item,index) in sceneryList" @check="sceneryCheck" :isManager="isSceneryManager" :index="index" :item="item" :key="index"></favorite-scenery-item>
				
				<mescroll-empty v-if="sceneryList.length==0"></mescroll-empty>				
				<!-- 操作条部分 begin -->
				<view class="cu-bar flex justify-between bg-white tabbar shop foot solids-top" v-if="isSceneryManager">
					<view class="margin-left">已选:{{sceneryTotal}}条</view>
					<button @tap="scenerySubmit()" class="cu-btn bg-red margin-right sm round">取消收藏</button>
				</view>
				<!-- 操作条部分 end -->
			</view>
			
			<view v-show="tabNow==1" :style="'height:'+screenHeight+'px;'">
				<view class="bg-white solid-top flex justify-between align-center padding-right" style="width: 100%;height:45px">
					<text class="text-sm padding-left">
						您共有 <text class="text-red" style="margin-left: 3px;margin-right: 3px;">{{goodsList.length}}</text> 条 特产 收藏
					</text>
					<text class="text-red" v-if="goodsList.length>0" @tap="goodsManager">{{!this.isGoodsManager?'管理':'取消'}}</text>
				</view>
				
				<favorite-goods-item v-for="(item,index) in goodsList" @check="goodsCheck" :isManager="isGoodsManager" :index="index" :item="item" :key="index"></favorite-goods-item>
				
				<mescroll-empty v-if="goodsList.length==0"></mescroll-empty>
				<!-- 操作条部分 begin -->
				<view class="cu-bar flex justify-between bg-white tabbar shop foot solids-top" v-if="isGoodsManager">
					<view class="margin-left">已选:{{goodsTotal}}条</view>
					<button @tap="goodsSubmit()" class="cu-btn bg-red margin-right sm round">取消收藏</button>
				</view>
				<!-- 操作条部分 end -->
			</view>
			
		</view>
		<view class="cu-load load-modal" v-if="!isInit">
			<view class="gray-text">加载中...</view>
		</view>
		
	</view>
</template>

<script>
	import favoriteSceneryItem from "@/components/favorite/favorite-scenery-item.vue"
	import favoriteGoodsItem from "@/components/favorite/favorite-goods-item.vue"	
	import navLongTab from "@/components/tab/navLongTab.vue"
	import MescrollEmpty from '@/components/mescroll-uni/components/mescroll-empty.vue';
	import uniSticky from "@/uni_modules/uv-sticky/components/uv-sticky/uv-sticky.vue"
	
	import * as confirm from '@/common/confirm.js'
	
	export default {
		components:{
		        favoriteSceneryItem,favoriteGoodsItem,navLongTab,uniSticky,MescrollEmpty
		}, 
		data() {
			return {
				//初始化函数
				isInit:false,
				screenHeight:this.s_h_notb-80,
				isSceneryManager:false,
				sceneryTotal:0,
				sceneryList:[],
				isGoodsManager:false,
				goodsTotal:0,
				goodsList:[],
				tabNow:0,
				tabs:[{name:'景点'},{name:'特产'}]
			}
		},
		onLoad() {
			this.listFavorite()
		},
		methods: {
			changeTab(index){
				this.tabNow=index
			},
			sceneryManager(){
				this.isSceneryManager=!this.isSceneryManager
			},
			goodsManager(){
				this.isGoodsManager=!this.isGoodsManager
			},
			listFavorite(){
				this.$api.post('/scenery/list_favorite').then(res => {
					this.list=[]
					let list=res.data
					list.forEach((item)=>{
						item.checked=false
					})
					this.$nextTick(()=>{
						this.sceneryList=list
					})
				})
				
				this.$api.post('/goods/list_favorite').then(res => {
					this.list=[]
					let list=res.data
					list.forEach((item)=>{
						item.checked=false
					})
					this.$nextTick(()=>{
						this.goodsList=list
					})					
					this.isInit=true
				})
			},
			sceneryCheck(index,checked){
				this.sceneryList[index].checked=checked
				
				let total=0
				this.sceneryList.forEach((item)=>{
					if(item.checked){
						total++
					}
				})
				this.sceneryTotal=total
			},
			goodsCheck(index,checked){
				this.goodsList[index].checked=checked
				
				let total=0
				this.goodsList.forEach((item)=>{
					if(item.checked){
						total++
					}
				})
				this.goodsTotal=total
			},
			scenerySubmit(){
				let ids=[]
				this.sceneryList.forEach((item)=>{
					if(item.checked){
						ids.push(item.scenery.id)
					}
				})
				if(ids.length==0){
					confirm.info('请您先选择景点')
					return
				}				
				
				confirm.choose('确认取消收藏?',(ids)=>{
					uni.showLoading({
						title:'提交中'
					})
					this.$api.post("/scenery/remove_favorites",{'ids':ids}).then(res => {
							uni.hideLoading()
							this.sceneryTotal=0
							this.listFavorite()
						}).catch(error=>{
							uni.hideLoading()
							confirm.info(error.msg)
						})
				},ids)				
			},
			goodsSubmit(){
				let ids=[]
				this.goodsList.forEach((item)=>{
					if(item.checked){
						ids.push(item.goods.id)
					}
				})
				if(ids.length==0){
					confirm.info('请您先选择特产')
					return
				}				
				
				confirm.choose('确认取消收藏?',(ids)=>{
					uni.showLoading({
						title:'提交中'
					})
					this.$api.post("/goods/remove_favorites",{'ids':ids}).then(res => {
							uni.hideLoading()
							this.goodsTotal=0
							this.listFavorite()
						}).catch(error=>{
							uni.hideLoading()
							confirm.info(error.msg)
						})
				},ids)				
			},
		}
	}
</script>

<style>

</style>
